import React, { useState } from 'react';
import { useUser } from '@contexts/UserContext';
import SettingsModal from '@components/SettingsModal';
import './styles.scss';

/**
 * Header 组件
 * 用于显示当前对话标题和用户操作按钮
 * 
 * @param {Object} props
 * @param {string} props.title - 当前对话标题
 * @param {Function} props.onTitleChange - 标题修改回调函数
 * @returns {JSX.Element} Header 组件
 */
const Header = ({ title, onTitleChange }) => {
    // 获取用户信息
    const { user } = useUser();

    // 本地状态
    const [isEditingTitle, setIsEditingTitle] = useState(false);
    const [tempTitle, setTempTitle] = useState(title);
    const [isSettingsOpen, setIsSettingsOpen] = useState(false);

    // 处理标题点击
    const handleTitleClick = () => {
        setTempTitle(title);
        setIsEditingTitle(true);
    };

    // 处理标题提交
    const handleTitleSubmit = () => {
        onTitleChange(tempTitle);
        setIsEditingTitle(false);
    };

    // 处理标题取消
    const handleTitleCancel = () => {
        setTempTitle(title);
        setIsEditingTitle(false);
    };

    // 处理标题输入
    const handleTitleChange = (e) => {
        setTempTitle(e.target.value);
    };

    // 处理标题输入框失焦
    const handleTitleBlur = () => {
        handleTitleSubmit();
    };

    // 处理标题输入框按键
    const handleTitleKeyDown = (e) => {
        if (e.key === 'Enter') {
            handleTitleSubmit();
        } else if (e.key === 'Escape') {
            handleTitleCancel();
        }
    };

    return (
        <header className="header">
            <div className="header-content">
                {/* 标题部分 */}
                <div className="title-section">
                    {isEditingTitle ? (
                        <input
                            type="text"
                            value={tempTitle}
                            onChange={handleTitleChange}
                            onBlur={handleTitleBlur}
                            onKeyDown={handleTitleKeyDown}
                            autoFocus
                            className="title-input"
                        />
                    ) : (
                        <div className="title" onClick={handleTitleClick}>
                            <span>{title}</span>
                            <i className="fas fa-edit edit-icon"></i>
                        </div>
                    )}
                </div>

                {/* 用户操作部分 */}
                <div className="user-actions">
                    {/* 分享按钮 */}
                    <button className="action-button" title="分享">
                        <i className="fas fa-share-alt"></i>
                    </button>

                    {/* 设置按钮 */}
                    <button
                        className="action-button"
                        title="设置"
                        onClick={() => setIsSettingsOpen(true)}
                    >
                        <i className="fas fa-cog"></i>
                    </button>

                    {/* 用户信息 */}
                    <div className="user-info">
                        <img
                            src={user?.avatar || '/default-avatar.png'}
                            alt={user?.name || '用户头像'}
                            className="avatar"
                        />
                        <span className="name">{user?.name || '未登录'}</span>
                    </div>
                </div>
            </div>

            {/* 设置弹窗 */}
            <SettingsModal
                isOpen={isSettingsOpen}
                onClose={() => setIsSettingsOpen(false)}
            />
        </header>
    );
};

export default Header; 